大前端

2.1.5 react 图表库

常用的图表库有：echarts、Antv(G2)、chartjs 不过打包的文件都很大有 几兆，
还有 D3.js, 一些封装的图表库

1.echarts

百度团队的开源的图表库，
但是打包出来的文件大

1.1 echarts 使用

# install
npm install --save echarts


# usage

/**
 * 首页
 */

import React, { Component } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

class HomeIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      size: 'default',
      loading: false,
      iconLoading: false
    };
  }

  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    let option = {
      title: { text: 'ECharts 柱状图示例' },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 绘制图表
    myChart.setOption(option);
  }

  render() {
    return (
      <div>
        <div className="content">
          <div className="content-header">首页</div>
          <div className="content-body ">
            <div id="main" style={{ width: 400, height: 400 }}></div>
          </div>
        </div>
      </div>
    );
  }
}

export default HomeIndex;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

如果需要引入其他的图，需要先 import, 如引入折线图： import 'echarts/lib/chart/line';
具体其他使用参考： echarts 文档

  • 更多配置项和数据参考： 示例

下面是 github 上封装好的一个 组件：

2.Antv(G2)

蚂蚁金服团队开源图表库，在 react 中使用有个封装好的库 BizCharts，

2.1 BizCharts 使用

# install

npm install bizcharts --save

使用参考网站的示例即可
1
2
3
4
5

3.chartjs

适用于小项目，它使用HTML5 canvas元素渲染图表，并且使用polyfills方式兼容在IE7/8上运行。所有图表都是可响应的。
实际上打包出来文件的也大

install

npm install --save chart.js@^1.1.1
npm install --save react-chartjs
1
2
3

4.recharts

是一个用 React 和 D3 构建的图表库,能帮助你在 React 应用中轻松绘制图表

使用

# install

npm install recharts


具体使用参考示例即可
1
2
3
4
5
6

参考

← 深入 React →